<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css3的压力布局</title>
  <link rel="stylesheet" href="css/h6.css">
</head>

<body>
  <!-- 对照组 -->
  <div class="mybox">
    <div class="mybox">1</div>
    <div class="mybox">2</div>
    <div class="mybox">3</div>
  </div>

  <!-- 布局一 -->
  <div class="mybox flex1">
    <div class="mybox">1111
      <hr> 的方法
      <hr> 的方法
    </div>
    <div class="mybox">2222</div>
    <div class="mybox">33333</div>
  </div>

  <!-- 布局二 -->
  <div class="mybox flex2">
    <div class="mybox">111</div>
    <div class="mybox">2ddfd</div>
    <div class="mybox">dfdsf</div>
  </div>

  <!-- 布局三 -->
  <div class="mybox flex3">
    <div class="mybox">111</div>
    <div class="mybox">2ddfd</div>
    <div class="mybox">dfdsf</div>
    <div class="mybox">ddd111</div>
  </div>

  <!-- 布局四 -->
  <div class="mybox flex4">
    <div class="mybox">111</div>
    <div class="mybox">2ddfd</div>
    <div class="mybox">dfdsf</div>
    <div class="mybox">ddd111</div>
  </div>

  <hr>

  <!-- 垂直轴对齐 -->
  <div class="mybox flex5">
    <div class="mybox">
      11111 <br> 22222 <br> 3333
    </div>

    <div class="mybox">
      单一行
    </div>

    <div class="mybox">
      黑暗骑士<br>就是蝙蝠侠
    </div>

  </div>

  <!-- 压力值（分配空间占用） -->
  <div class="mybox flex6">
    <div class="mybox">1</div>
    <div class="mybox">2</div>
    <div class="mybox">3</div>
  </div>

  <div class="mybox flex7">
    <div class="mybox">111111111</div>
    <div class="mybox">2</div>
    <div class="mybox">33333</div>
  </div>


</body>

</html>